<template>
    <web-view :src="fileUrl" class="web-view-container">
        <cover-view class="coverBtn" @click.native="handleDownload">
            <cover-image class="cover-image" :src="staticImg('download.png')"></cover-image>
        </cover-view>
    </web-view>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
    import { downFile, staticImg, BarTitle, Modal, openDocument } from '@/utils/utils.js';

    const fileUrl = ref('');
    let originalPdfUrl = '';
    // https://api-consult-beta.newgoai.com/document/562721380cb6747594b8d99d5d185f81.pdf

    onLoad((opt) => {
        if (opt.fileurl) {
            originalPdfUrl = decodeURIComponent(opt.fileurl);
            fileUrl.value = originalPdfUrl;
            console.log(fileUrl.value, 'fileUrl.value');
        }
    });

    onShow(() => {
        if (originalPdfUrl && fileUrl.value !== originalPdfUrl) fileUrl.value = originalPdfUrl;
        console.log(fileUrl.value, 'onShow');
    });
    onHide(() => {
        // 页面隐藏时清空URL，确保返回时能重新加载
        fileUrl.value = '';
    });
    const handleDownload = async () => {
        console.log(fileUrl.value);
        const result = await Modal('请在文件预览页点击右上角下载或发送', '提示', false);
        if (!result) return;
        // const filePath = await downFile(uploadUrl.value);
        const filePath = await downFile(fileUrl.value);
        openDocument(filePath);
    };
</script>
<style lang="scss" scoped>
    cover-view,
    cover-image {
        visibility: visible !important;
        z-index: 99999;
    }

    .coverBtn {
        width: 686rpx;
        height: 84rpx;
        background: linear-gradient(90deg, #2494fb 0%, #0c7ef3 100%);
        position: fixed;
        bottom: 60rpx;
        left: 32rpx;
        border-radius: 42rpx;
        z-index: 999999;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        pointer-events: auto;
        transform: translateZ(0);

        .cover-image {
            width: 100%;
            height: 100%;
            pointer-events: auto;
            transform: translateZ(0);
            will-change: transform;
        }
    }
</style>
